<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
					 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
html, body {
	padding: 0px; margin: 0px;
}

.abc {
	position: relative;
	margin-left: 220px;
	border: 2px solid blue;
}

</style>
</head>
<body>
<script type="text/javascript" defer="defer">
  document.write('tran the trong') ;
</script>
<script type="text/javascript">
  document.write('tran the trong 2') ;
</script>
	<div style="height: 20px;" class="abc" onclick="reference(event, this)">
		<div>sdg asdg asdg asdg asdgasd hasdh</div>
		<div style="border: solid 1px red; left: 20px; position: absolute;" onclick="reference(event, this)">left: 20px</div>
	</div>
</body>
<script type="text/javascript">

	function reference(event, element) {
		event = event ? event : window.event;
		event.cancelBubble = true;
		var cs = new String();
		
		cs += "offsetTop : "+element.offsetTop+"\n";
		cs += "offsetLeft : "+element.offsetLeft+"\n";
	
		alert(cs);
	}
	
</script>

</html>